<template>
  <a-modal width="40%" v-bind:visible="isShowEdit" title="批量修改" @ok="onOk" @cancel="onCancel">
    <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="移动计划">
        <a-switch v-model="move" checked-children="开" un-checked-children="关" />
      </a-form-item>
      <a-form-item label="操作时间" v-if="isShow">
        <a-date-picker @change="operChange" class="dateStyle" />
      </a-form-item>
      <a-form-item label="目标时间" v-if="isShow">
        <a-date-picker @change="targetChange" class="dateStyle" />
      </a-form-item>
      <a-form-item label="开始结束时间" v-if="isShow">
        <div style="display: flex; align-items: center">
          <a-time-picker @change="startTime" class="dateStyle" format="HH:mm" />
          <span style="margin: 0 10px">至</span>
          <a-time-picker @change="endTime" class="dateStyle" format="HH:mm" />
        </div>
      </a-form-item>
      <a-form-item label="每笔间隔时间(分钟):" v-if="isShow">
        <div style="display: flex; align-items: center">
          <a-input-number @change="startChange" class="dateStyle" id="inputNumber" />
          <span style="margin: 0 10px">至</span>
          <a-input-number @change="endChange" class="dateStyle" id="inputNumber" />
        </div>
      </a-form-item>
      <a-form-item label="标记通道颜色">
        <a-select style="width: 200px" v-model="form.channel_color_mark">
          <a-select-option v-for="item in colorOption" :key="item.id" :value="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="重新生成计划">
        <a-select style="width: 200px" v-model="form.rebuild_plans">
          <a-select-option v-for="item in rebuildPlans" :key="item.id" :value="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="消一还一">
        <a-switch v-model="remove" checked-children="开" un-checked-children="关" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { batchEditAPI } from '@/api/transaction.js'
export default {
  name: 'BatchEdit',
  props: {
    isShowEdit: {
      type: Boolean,
      default: false
    },
    ids: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    immediate: true,
    remove(boo) {
      if (boo) {
        this.form.rebuild_plans_mode = 'urgent'
      } else {
        this.form.rebuild_plans_mode = ''
      }
    },
    move(boo) {
      if (boo) {
        this.isShow = true
        this.form.move_plans = '1'
      } else {
        this.isShow = false
        this.form.move_plans = '0'
      }
    }
  },
  data() {
    return {
      isShow: false,
      form: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        channel_color_mark: '0', // 标记通道颜色
        date_handle: '', // 操作时间
        date_target: '', // 目标时间
        interval_minute_range: [], // 每笔间隔时间
        move_plans: '0', // 移动计划
        plan_ids: [],
        rebuild_plans: '0', // 重新生成计划
        rebuild_plans_mode: '', //消一还一
        start_time_range: []
      },
      colorOption: [
        {
          id: '0',
          name: '不修改'
        },
        {
          id: '1',
          name: '红色'
        },
        {
          id: '2',
          name: '正常'
        }
      ],
      rebuildPlans: [
        { id: 'all', name: '全部' },
        { id: '0', name: '不生成' },
        { id: '1', name: '自定义' }
      ],
      remove: false,
      move: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      }
    }
  },
  methods: {
    onCancel() {
      this.$emit('update:isShowEdit', false)
      this.$emit('update:ids', undefined)
    },
    async onOk() {
      this.form.plan_ids = this.ids
      try {
        await batchEditAPI(this.form)
        this.$message.success('操作成功')
        this.$emit('upload')
        this.$emit('update:isShowEdit', false)
        this.$emit('update:ids', undefined)
      } catch (error) {
        // this.$message.error(error)
        console.log(error)
      }
    },
    operChange(content, date) {
      this.form.date_handle = date
    },
    targetChange(content, date) {
      this.form.date_target = date
    },
    startTime(content, time) {
      this.form.start_time_range[0] = time
    },
    endTime(content, time) {
      this.form.start_time_range[1] = time
    },
    startChange(value) {
      this.form.interval_minute_range[0] = value
    },
    endChange(value) {
      this.form.interval_minute_range[1] = value
    }
  }
}
</script>

<style lang="less" scoped>
.dateStyle {
  width: 200px;
}
/deep/ .ant-form-item {
  margin: 8px;
}
</style>
